<template>
  <view class="ad-settings-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">广告设置</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 广告设置介绍 -->
    <view class="ad-intro">
      <text class="intro-text">您可以通过以下设置管理应用内的广告体验</text>
    </view>
    
    <!-- 广告个性化设置 -->
    <view class="ad-section">
      <text class="section-title">个性化广告</text>
      
      <view class="ad-item">
        <view class="item-left">
          <text class="item-icon">🎯</text>
          <text class="item-text">个性化广告推荐</text>
        </view>
        <switch :checked="personalizedAdsEnabled" @change="togglePersonalizedAds"/>
      </view>
      
      <view class="ad-explanation">
        <text class="explanation-text">
          开启后，我们会根据您的使用习惯为您推荐更感兴趣的广告。
          关闭后，将仅显示与您兴趣无关的通用广告。
        </text>
      </view>
    </view>
    
    <!-- 广告类型控制 -->
    <view class="ad-section">
      <text class="section-title">广告类型</text>
      
      <view class="ad-type-item">
        <view class="type-left">
          <text class="type-icon">📺</text>
          <text class="type-text">视频广告</text>
        </view>
        <switch :checked="videoAdsEnabled" @change="toggleVideoAds"/>
      </view>
      
      <view class="ad-type-item">
        <view class="type-left">
          <text class="type-icon">🖼️</text>
          <text class="type-text">横幅广告</text>
        </view>
        <switch :checked="bannerAdsEnabled" @change="toggleBannerAds"/>
      </view>
      
      <view class="ad-type-item">
        <view class="type-left">
          <text class="type-icon">🎮</text>
          <text class="type-text">激励广告</text>
        </view>
        <switch :checked="rewardAdsEnabled" @change="toggleRewardAds"/>
      </view>
      
      <view class="ad-type-item">
        <view class="type-left">
          <text class="type-icon">📱</text>
          <text class="type-text">插屏广告</text>
        </view>
        <switch :checked="interstitialAdsEnabled" @change="toggleInterstitialAds"/>
      </view>
    </view>
    
    <!-- 广告偏好设置 -->
    <view class="ad-section">
      <text class="section-title">广告偏好</text>
      
      <view class="preference-item" @tap="navigateToInterestCategories">
        <view class="preference-left">
          <text class="preference-icon">🎭</text>
          <text class="preference-text">兴趣类别</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
      
      <view class="preference-item" @tap="showAdHistory">
        <view class="preference-left">
          <text class="preference-icon">📋</text>
          <text class="preference-text">广告历史记录</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
      
      <view class="preference-item" @tap="manageAdBlocklist">
        <view class="preference-left">
          <text class="preference-icon">🚫</text>
          <text class="preference-text">广告黑名单</text>
        </view>
        <text class="arrow-icon">→</text>
      </view>
    </view>
    
    <!-- 广告透明度 -->
    <view class="ad-section">
      <text class="section-title">广告透明度</text>
      
      <view class="transparency-item">
        <text class="transparency-text">广告展示频率</text>
        <slider
          min="1"
          max="5"
          value="{{ adFrequency }}"
          show-value
          @change="onAdFrequencyChange"
        />
        <text class="transparency-desc">
          1: 很少 - 5: 经常
        </text>
      </view>
      
      <view class="transparency-item">
        <text class="transparency-text">广告持续时间</text>
        <slider
          min="10"
          max="60"
          value="{{ adDuration }}"
          show-value
          @change="onAdDurationChange"
        />
        <text class="transparency-desc">
          10-60秒 (仅适用于视频广告)
        </text>
      </view>
    </view>
    
    <!-- 广告说明 -->
    <view class="ad-notice-section">
      <text class="notice-title">关于广告</text>
      <text class="notice-text">
        1. 应用内广告有助于支持应用开发和持续更新。
      </text>
      <text class="notice-text">
        2. 您可以随时修改广告设置，更改将在下次启动应用时生效。
      </text>
      <text class="notice-text">
        3. 我们尊重您的隐私，不会分享您的个人信息给广告商。
      </text>
      
      <view class="ad-help" @tap="showAdHelp">
        <text class="help-text">了解更多关于广告的信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 广告个性化设置
      personalizedAdsEnabled: true,
      
      // 广告类型控制
      videoAdsEnabled: true,
      bannerAdsEnabled: true,
      rewardAdsEnabled: true,
      interstitialAdsEnabled: true,
      
      // 广告偏好设置
      adFrequency: 3, // 1-5
      adDuration: 30 // 10-60秒
    };
  },
  onLoad() {
    // 加载广告设置
    this.loadAdSettings();
  },
  methods: {
    // 加载广告设置
    loadAdSettings() {
      // 模拟从本地存储加载广告设置
      const settings = [
        'personalizedAdsEnabled',
        'videoAdsEnabled',
        'bannerAdsEnabled',
        'rewardAdsEnabled',
        'interstitialAdsEnabled'
      ];
      
      settings.forEach(key => {
        const savedValue = uni.getStorageSync(key);
        if (savedValue !== '') {
          this[key] = JSON.parse(savedValue);
        }
      });
      
      // 加载滑动条设置
      const frequency = uni.getStorageSync('adFrequency');
      if (frequency !== '') {
        this.adFrequency = parseInt(frequency);
      }
      
      const duration = uni.getStorageSync('adDuration');
      if (duration !== '') {
        this.adDuration = parseInt(duration);
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 保存设置
    saveSetting(key, value) {
      this[key] = value;
      uni.setStorageSync(key, JSON.stringify(value));
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
    },
    
    // 切换个性化广告
    togglePersonalizedAds(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('personalizedAdsEnabled', isEnabled);
      
      this.showToast(isEnabled ? '已开启个性化广告推荐' : '已关闭个性化广告推荐');
    },
    
    // 切换视频广告
    toggleVideoAds(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('videoAdsEnabled', isEnabled);
      
      this.showToast(isEnabled ? '已开启视频广告' : '已关闭视频广告');
    },
    
    // 切换横幅广告
    toggleBannerAds(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('bannerAdsEnabled', isEnabled);
      
      this.showToast(isEnabled ? '已开启横幅广告' : '已关闭横幅广告');
    },
    
    // 切换激励广告
    toggleRewardAds(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('rewardAdsEnabled', isEnabled);
      
      this.showToast(isEnabled ? '已开启激励广告' : '已关闭激励广告');
    },
    
    // 切换插屏广告
    toggleInterstitialAds(e) {
      const isEnabled = e.detail.value;
      this.saveSetting('interstitialAdsEnabled', isEnabled);
      
      this.showToast(isEnabled ? '已开启插屏广告' : '已关闭插屏广告');
    },
    
    // 广告频率变化
    onAdFrequencyChange(e) {
      const value = e.detail.value;
      this.adFrequency = value;
      uni.setStorageSync('adFrequency', value);
      
      let message = '';
      switch (value) {
        case 1:
          message = '广告将很少显示';
          break;
        case 2:
          message = '广告显示频率较低';
          break;
        case 3:
          message = '广告显示频率适中';
          break;
        case 4:
          message = '广告显示频率较高';
          break;
        case 5:
          message = '广告将经常显示';
          break;
      }
      this.showToast(message);
    },
    
    // 广告持续时间变化
    onAdDurationChange(e) {
      const value = e.detail.value;
      this.adDuration = value;
      uni.setStorageSync('adDuration', value);
      
      this.showToast(`视频广告持续时间已设置为${value}秒`);
    },
    
    // 导航到兴趣类别页面
    navigateToInterestCategories() {
      uni.navigateTo({
        url: '/pages/demo/interest-categories'
      });
    },
    
    // 显示广告历史记录
    showAdHistory() {
      uni.navigateTo({
        url: '/pages/demo/ad-history'
      });
    },
    
    // 管理广告黑名单
    manageAdBlocklist() {
      uni.navigateTo({
        url: '/pages/demo/ad-blocklist'
      });
    },
    
    // 显示广告帮助
    showAdHelp() {
      uni.showModal({
        title: '关于广告',
        content: '广告支持我们提供免费服务。您可以随时调整广告设置，控制广告的显示方式和频率。\n\n如果您想完全移除广告，请考虑升级到高级版。',
        confirmText: '了解更多',
        cancelText: '我知道了',
        success: (res) => {
          if (res.confirm) {
            // 跳转到广告帮助页面或显示更多信息
            uni.showToast({
              title: '即将跳转到帮助中心',
              icon: 'none'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.ad-settings-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-right {
  width: 50rpx;
}

/* 广告设置介绍 */
.ad-intro {
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 广告设置区域 */
.ad-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

/* 广告设置项 */
.ad-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.item-text {
  font-size: 32rpx;
  color: #333;
}

/* 广告说明 */
.ad-explanation {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.explanation-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 广告类型项 */
.ad-type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.ad-type-item:last-child {
  border-bottom: none;
}

.type-left {
  display: flex;
  align-items: center;
}

.type-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.type-text {
  font-size: 32rpx;
  color: #333;
}

/* 偏好设置项 */
.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.preference-item:last-child {
  border-bottom: none;
}

.preference-left {
  display: flex;
  align-items: center;
}

.preference-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.preference-text {
  font-size: 32rpx;
  color: #333;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
}

/* 广告透明度设置 */
.transparency-item {
  margin-bottom: 40rpx;
}

.transparency-item:last-child {
  margin-bottom: 0;
}

.transparency-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

slider {
  width: 100%;
}

.transparency-desc {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
  text-align: right;
}

/* 广告说明区域 */
.ad-notice-section {
  padding: 40rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.notice-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.notice-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 15rpx;
  display: block;
}

.ad-help {
  margin-top: 30rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.help-text {
  font-size: 28rpx;
  color: #07c160;
  display: block;
  text-align: center;
}

/* switch 样式 */
switch {
  transform: scale(0.8);
}
</style>